/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_self
 *= require javascript-autocomplete/auto-complete.css
 */

@import "font-awesome"
@import "lato"

// Default bulma font stack, plus Lato webfont as priority
$family-sans-serif: "Lato", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif

// Adjust bulma weight variables to weights of lato font that are actually loaded
$weight-light:    400
$weight-normal:   400
$weight-medium:   400
$weight-semibold: 700
$weight-bold:     700

// Bulma colors reference:
// * https://bulma.io/documentation/overview/colors/
// * https://bulma.io/documentation/modifiers/typography-helpers/
$red: #A61414
$link: $red
$primary: $red
$success: #59A80F
$text: #222

$navbar-height: 4.5rem
$navbar-item-hover-background-color: transparent
$navbar-item-active-background-color: transparent
$navbar-tab-hover-background-color: transparent
$navbar-tab-active-background-color: transparent
// Need to set these variables despite them being bulma defaults
// so we can customize the navbar breakpoint to the
// default bulma widescreen breakpoint before importing bulma itself
$gap: 64px
$widescreen: 1152px + (2 * $gap)
// Navbar burger toggles on desktop <-> widescreen (default: tablet <-> desktop)
// since we have too many menu items
$navbar-breakpoint: $widescreen

@import "bulma/bulma"
@import "bulma-tooltip/dist/css/bulma-tooltip"
@import "components/**/*"

@import "github-syntax-light/lib/github-light.css"

.border-bottom
  border-bottom: 1px solid $light

header.main
  .navbar
    box-shadow: $box-shadow
    @extend .is-fixed-top

    &.headroom
      will-change: transform
      transition: transform 200ms linear

    &.headroom--pinned
      transform: translateY(0%)

    &.headroom--unpinned
      transform: translateY(-100%)

    img
      max-height: 30px

    // Show a little red border underneath the active item
    .navbar-item
      .wrap
        padding: 5px 0px
        border-bottom: 3px solid transparent

      &.is-active
        .wrap
          border-color: $primary

    .navbar-menu.is-active
      // Do not show box shadow, it looks funny on desktop
      box-shadow: none
      // Do not show red active border on mobile nav
      .navbar-item.is-active
        .wrap
          border-color: transparent

    // These values are hard-coded within bulma, we override
    // them here to keep it consistent with the adjacent search icon
    // in mobile view
    .navbar-burger
      margin-left: 0
      &:hover
        background: transparent
        span
          color: $primary
      span
        height: 2px

    // Make the mobile search direct icon appear similar to the
    // navbar burger and ensure it's nicely aligned
    .mobile-search
      margin-left: auto
      @extend .is-hidden-widescreen
      height: $navbar-height
      width: $navbar-height
      .icon
        display: inline-block
        margin: 0 auto
        width: auto
        transform: scale(1.1)

.hero
  @extend .border-bottom
  a
    color: $text
  h2
    @extend .is-size-2, .is-size-3-mobile

  .meta
    @extend .column, .is-narrow-tablet, .has-text-right-tablet
  .score
    @extend .is-size-5, .is-size-6-mobile
  .description
    @extend .is-size-5, .is-size-6-mobile, .has-text-grey-dark
  .categories
    margin-top: 0.75rem

section.main
  min-height: 75vh

footer.footer
  @extend .has-text-grey-dark
  a
    @extend .has-text-grey-dark
    &:hover
      @extend .has-text-black
  .content
    a
      @extend .has-text-link
  .sponsors
    @extend .has-text-centered
    a
      opacity: 0.5
      transition: opacity 150ms ease-in
      &:hover
        opacity: 1

.category-group
  @extend .column, .is-half
  h3
    @extend .is-size-4
    padding: 0.75rem 0


.narrow-column
  @extend .column, .content, .is-three-fifths-desktop, .is-offset-one-fifth-desktop

article.blog-post
  @extend .narrow-column
  font-size: 110%
  line-height: 1.7
  table, blockquote
    font-size: 80%
  h2, h3:not(:first-child), h4, h5, h6
    font-weight: 700
    margin-top: 90px
  blockquote
    padding: 10px
    margin: 10px 30px
    background: none
    border-color: $grey
    color: $dark

.search.hero
  .search-form
    .button, .input
      @extend .is-medium

.search-form
  .button i.fa
    // For some reason after converting to locally hosted font awesome and lato
    // fonts this got a little out of line
    margin-top: -2px

// See https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options
// and https://github.com/chartjs/Chart.js/issues/2958#issuecomment-261949718
.chart-container
  position: relative
  height: 350px
  &.small
    height: 180px

.autocomplete-suggestions
  .autocomplete-suggestion
    padding: 10px 8px
    &.selected
      background: $primary
      color: white
      b
        color: white
    b
      color: black
      font-weight: bold
